<template>
	<div class="service_contract">
		<div class="flex top">
			<div class="flex-1">
				<img class="w-100 h-100" src="../../assets/images/risk.jpg" alt="百融风控" />
			</div>
			<div class="right">
				<p class="flex flex-between align-center">
					<span style="font-size: 20px">风控账户</span>
					<span class="blue-font pointer" @click="checkRecords">购买记录</span>
				</p>
				<p class="flex flex-between align-center" style="margin: 15px 0 10px">
					<span class="color-666">征信风控余量</span>
					<span class="color-666">{{ risk_cre_amount }}次</span>
				</p>
				<el-button class="w-100" type="primary" style="font-size: 18px" @click="toBuy">去购买</el-button>
				<el-divider></el-divider>
				<p class="flex flex-between align-center">
					<span class="color-666">自动充值（{{
          risk_cre_automatic == 1 ? "已开启" : "未开启"
          }}）</span>
					<span class="blue-font pointer" @click="autoRecharge">{{
          risk_cre_automatic == 1 ? "关闭" : "开启"
          }}</span>
				</p>
				<el-tag class="w-100 text-center" type="warning">开启自动充值避免风控次数不足</el-tag>
			</div>
		</div>
		<h5 class="record_header">征信风控记录</h5>
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="订单编号">
					<el-input style="width: 230px" v-model="searchForm.order_id" placeholder="请输入订单编号" clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="用户姓名">
					<el-input v-model="searchForm.user_name" placeholder="请输入用户姓名" clearable></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="searchForm.user_mobile" placeholder="请输入手机号" clearable></el-input>
				</el-form-item>
				<el-form-item label="查询时间">
					<my-date-picker ref="myDatePicker"></my-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" border>
			<el-table-column align="center" width="80" prop="order_id" label="ID" />
			<el-table-column align="center" width="190" label="订单编号">
				<template slot-scope="scope">
					<span class="blue-font pointer"
						@click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="cert_name" label="用户名" />
			<el-table-column align="center" prop="cert_no" label="用户身份证号" />
			<el-table-column align="center" prop="mobile" label="用户手机号" />
			<el-table-column align="center" label="风控详情">
				<template slot-scope="scope">
					<el-button size="mini" class="border-btn" @click="handleRadar(scope.row)">查看征信报告</el-button>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="start_at" label="查询时间" />
		</el-table>
		<creditData ref="creditData" :edit-item="editItem" @getList="getList"></creditData>
		<buy-dialog ref="buyDialog" dialog-title="征信报告余额购买" @getList="getList" :type="8"></buy-dialog>
		<recharge-dialog ref="rechargeDialog" dialog-title="征信报告自动充值" @getList="getList" :type="8"></recharge-dialog>
		<custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
	</div>
</template>

<script>
	import {
		getShopRiskCreCreditList,
		getShopCreCreditCreditStuatus,
		riskCreCreditAutoRecharge
	} from '@/api/marketing'
	import customPage from '@/components/customPage'
	import myDatePicker from '@/components/myDatePicker'
	import buyDialog from './components/buy'
	import rechargeDialog from './components/recharge'
	import creditData from './components/creditData'
	export default {
		components: {
			customPage,
			myDatePicker,
			buyDialog,
			rechargeDialog,
			creditData
		},
		data() {
			return {
				tableData: [],
				total: 0,
				searchForm: {
					order_id: '',
					user_name: '',
					user_mobile: '',
					create_time: ''
				},
				risk_cre_automatic: 0,
				risk_cre_amount: 0,
				disabled: false,
				editItem: {}
			}
		},
		methods: {
			checkUrl(url) {
				if (url) {
					window.open(url)
				} else {
					this.$message.warning('暂无法查看报告')
					return
				}
			},
			// 自动充值
			autoRecharge() {
				if (!this.showTip()) {
					return
				}
				if (this.risk_cre_automatic === 1) {
					// 关闭
					this.$confirm('确认要关闭自动充值吗?', '关闭自动充值', {
							confirmButtonText: '确定',
							cancelButtonText: '取消'
						})
						.then(() => {
							riskCreCreditAutoRecharge().then((res) => {
								this.getList()
							})
						})
						.catch(() => {})
				} else {
					// 开启
					this.$refs.rechargeDialog.dialogVisible = true
				}
			},
			// 去购买
			toBuy() {
				if (!this.showTip()) {
					return
				}
				this.$refs.buyDialog.dialogVisible = true
			},
			// 查看合同购买记录
			checkRecords() {
				if (!this.showTip()) {
					return
				}
				this.$router.push({
					name: "serviceCreditRecord"
				})
			},
			handleRadar(item) {
				this.editItem = {
					orderId: item.order_id,
					trade_no: item.trade_no,
					cert_name: item.cert_name,
					cert_no: item.cert_no,
					mobile: item.mobile
				}
				this.$refs.creditData.dialogVisible = true
				this.getList()
			},
			// 查询
			search() {
				if (!this.showTip()) {
					return
				}
				const pickerVal = this.$refs.myDatePicker.getVal()
				if (pickerVal !== 'error') {
					this.searchForm.create_time = pickerVal
					this.$refs.customPage.page = 1
					this.getList()
				}
			},
			// 重置
			reset() {
				if (!this.showTip()) {
					return
				}
				if (this.$refs.myDatePicker) {
					this.$refs.myDatePicker.reset()
				}
				this.searchForm = {
					order_id: '',
					user_name: '',
					user_mobile: '',
					create_time: ''
				}
				this.getList()
			},
			// 获取数据
			getList() {
				const {
					page,
					pageSize
				} = this.$refs.customPage;
				getShopRiskCreCreditList({
					page,
					pageSize,
					...this.searchForm
				}).then((res) => {
					console.log(res.data);
					const {
						data,
						risk_cre_automatic,
						risk_cre_amount
					} = res
					this.tableData = res.data || []
					this.total = res.data.length || 0
					this.risk_cre_automatic = risk_cre_automatic
					this.risk_cre_amount = risk_cre_amount
				});

			},
			goToOrder(orderId) {
				if (orderId) {
					this.$router.push({
						name: 'orderList',
						params: {
							orderId
						}
					})
				}
			},
			getData() {
				getShopCreCreditCreditStuatus().then((res) => {
						this.disabled = false
						this.getList()
					})
					.catch((err) => {
						//   this.disabled = true;
					});
			},
			showTip() {
				if (this.disabled) {
					this.$message({
						message: '该店铺暂未开启百融风控, 请先开启后再查看该功能',
						type: "error"
					});
					return false
				}
				return true
			},
		},
		mounted() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 300px;

		.el-divider--horizontal {
			margin: 20px 0;
		}
	}

	.right {
		width: 345px;
		margin-left: 20px;
		padding: 20px;
		border: 1px solid #e6e6e6;

		p {
			line-height: 32px;
		}

		span {
			font-size: 16px;
		}

		.el-tag {
			color: #ff8500;
			margin-top: 10px;
			font-size: 14px;
		}
	}

	.record_header {
		padding-left: 15px;
		border-left: 3px solid $mainBlue;
		margin: 20px 0;
	}
</style>
